import * as React from "react";
import "./index.scss";

export default props => {
  const key = props["data-key"];
  const { node } = props;
  const [ val, changeVal ] = React.useState('');
  const labelText = node.data.get("label");
  const placeholder = node.data.get("placeholder");
  return (
    <div
      data-key={key}
      style={{
        ...props.style,
      }}
    >
      <div style={{ position: "relative" }}>
        <textarea value={val} onChange={(e) => changeVal(e.target.value)} />
        <div
          style={{
            position: "absolute",
            top: 0,
          }}
          className={val ? "hidden" : "costumlabel"}
        >
          <label>{labelText || "文本标签"}:</label>
          {placeholder}
        </div>
      </div>
    </div>
  );
};
